<template>
  <v-container fluid>
    <v-flex xs12>
      <v-card class="grey lighten-4 elevation-0">
        <v-card-title>
          {{title}}
          <v-spacer></v-spacer>
          <!--<v-text-field append-icon="search" label="Search" single-line hide-details v-model="search"></v-text-field>-->
          <v-btn floating small class="grey" @click.native="cancel()">
            <v-icon light>cancel</v-icon>
          </v-btn>
          &nbsp;
          <v-btn floating small class="purple" @click.native="save()">
            <v-icon light>save</v-icon>
          </v-btn>
          &nbsp;
          <v-btn floating small class="blue" @click.native="addProduct()">
            <v-icon light>add</v-icon>
          </v-btn>
        </v-card-title>
        <v-card-text>
          <v-container fluid>
            <v-layout row wrap>
              <v-flex md4 xs12>
                <v-select
                  v-model="order.card_no"
                  label="输入卡号"
                  autocomplete
                  :items="card_list"
                  class="input-group--focused"
                ></v-select>
              </v-flex>
              <v-flex md4 xs12>
                <v-text-field name="title" label="标题" hint="输入订单标题" value="Input text" v-model="order.title" class="input-group--focused"></v-text-field>
              </v-flex>
              <v-flex md4 xs12>
                <v-text-field name="left_eye" label="左眼" hint="输入左眼视力" value="Input text" v-model="order.left_eye" class="input-group--focused"></v-text-field>
              </v-flex>
              <v-flex md4 xs12>
                <v-text-field name="right_eye" label="右眼" hint="输入右眼实力" value="Input text" v-model="order.right_eye" class="input-group--focused"></v-text-field>
              </v-flex>
              <v-flex md4 xs12>
                <v-text-field name="glass_num" label="镜片数量" hint="Number between 1 to 100" v-model="order.glass_num" class="input-group--focused" required></v-text-field>
              </v-flex>
              <v-flex md4 xs12>
                <v-text-field name="total" label="消费金额" hint="输入消费金额" value="Input text" v-model="order.total" class="input-group--focused"></v-text-field>
              </v-flex>
              <v-flex md4 xs12>
                <v-text-field name="point_gain" label="可获积分" hint="输入订单标题" value="Input text" v-model="order.point_gain" class="input-group--focused"></v-text-field>
              </v-flex>
              <v-flex md4 xs12>
                <v-text-field name="point_avail" label="可用积分" hint="输入订单标题" value="Input text" v-model="order.point_avail" class="input-group--focused"></v-text-field>
              </v-flex>
              <v-flex md4 xs12>
                <v-menu lazy :close-on-content-click="false" v-model="orderDateMenu" transition="v-scale-transition" offset-y full-width :nudge-left="40" max-width="290px">
                  <v-text-field slot="activator" label="订单日期" v-model="order.time" prepend-icon="event" readonly></v-text-field>
                  <v-date-picker v-model="order.time" no-title scrollable>
                  </v-date-picker>
                </v-menu>
              </v-flex>
              <v-flex xs12 v-if="order.products && order.products.length>0">

                <v-list class="blue lighten-4 elevation-0" two-line>
                  <v-list-tile avatar ripple v-for="(item, index) in order.products" v-bind:key="item.id">
                    <v-list-tile-content dark>
                      <v-list-tile-title>类型：{{ item.category }} 明细：{{item.name}}

                      </v-list-tile-title>
                      <v-list-tile-sub-title class="grey--text text--darken-4">{{ item.category }}</v-list-tile-sub-title>
                      <!--<v-list-tile-sub-title>{{ item.unitInStock }}
                        </v-list-tile-sub-title>-->

                    </v-list-tile-content>
                    <v-list-tile-action>
                      <v-btn floating small class="navy" @click.native="remove(index)">
                        <v-icon v-bind:class="[item.active ? 'teal--text' : 'grey--text']">delete</v-icon>
                      </v-btn>
                    </v-list-tile-action>
                  </v-list-tile>
                </v-list>

              </v-flex>

            </v-layout>
          </v-container>
        </v-card-text>
      </v-card>
    </v-flex>

    <v-layout row justify-center>
      <v-dialog v-model="addProductDialog" width="700" persistent>
        <v-card>
          <v-card-row>
            <v-card-title>{{dialogTitle}}</v-card-title>
          </v-card-row>
          <v-card-row>
            <v-card-text>{{dialogText}}</v-card-text>

          </v-card-row>
          <v-card-text>
            <v-layout row wrap>
              <v-flex md6 xs12>
                <v-select required v-bind:items="categoryList" label="类型" v-model="categoryId" item-value="text"></v-select>
              </v-flex>
              <v-flex md6 xs12>
                <v-select required v-bind:items="products" label="产品" v-model="productId" item-text="name" item-value="id"></v-select>
              </v-flex>
            </v-layout>
          </v-card-text>

          <v-card-row actions>
            <v-btn class="green--text darken-1" flat="flat" @click.native="saveProduct">确认</v-btn>
            <v-btn class="green--text darken-1" flat="flat" @click.native="cancelAddProduct">取消</v-btn>
          </v-card-row>
        </v-card>
      </v-dialog>
    </v-layout>

  </v-container>
</template>
<script>
export default {
  data: function () {
    return {
      card_list: [],
      select: null,
      categoryId: null,
      dialogTitle: '添加眼镜信息',
      dialogText: '从列表中选择镜框信息',
      addProductDialog: false,
      orderDateMenu: false,
      shippedDateMenu: false,
      errors: [],
      title: '',
      order: {
        card_no: '',
        title: '',
        left_eye: '',
        right_eye: '',
        total: '',
        point_gain: '',
        point_avail: '',
        time: '',
        products: [],
        remark: ''
      },
      productId: null,
      customers: [],
      customerList: [],
      categoryList: [],
      products: []
    }
  },
  computed: {
    newOrder: function () {
      return 'New Order'
    }
  },
  watch: {
    categoryId: function () {
      if (this.categoryId.length > 0) {
        this.products = []
        this.api.getData('product?categoryId=' + this.categoryId).then((res) => {
          console.log('get by cat', res.data)
          res.data.forEach((c) => {
            var product = {}
            product['name'] = c.name
            product['id'] = c.id
            this.products.push(product)
          })
          console.log(this.products)
          return this.products
        }, (err) => {
          console.log(err)
        })
      }
    }
  },
  methods: {
    save: function () {
      let order = this.order

      order.product = JSON.stringify(order.product)

      if (!order.id) {
        this.api.postData('orders', order).then((res) => {
          this.$router.push({ name: 'Orders' })
        }, (err) => {
          console.log(err)
        })
      } else {
        this.api.putData('orders/' + order.id.toString(), order).then((res) => {
          this.$router.push({ name: 'Orders' })
        }, (err) => {
          console.log(err)
        })
      }
    },
    selectCustomer(item) {
      this.order.customerId = item.value
    },
    getById: function () {
      this.api.getData('orders/' + this.$route.params.id + '?_expand=customer').then((res) => {
        this.order = res.data[0]
        this.order.customer.name = this.order.customer.firstName + ' ' + this.order.customer.lastName
      }, (err) => {
        console.log(err)
      })
    },
    getCustomers: function () {
      this.api.getData('customers').then((res) => {
        this.customers = res.data
        this.customerList = []
        this.customers.forEach((c) => {
          let customer = c
          customer.text = c.firstName + ' ' + c.lastName
          customer.value = c.id
          this.customerList.push(customer)
        })
      }, (err) => {
        console.log(err)
      })
    },
    cancel: function () {
      this.$router.push({ name: 'Orders' })
    },
    remove: function (index) {
      this.order.products.splice(index, 1)
    },
    addProduct: function () {
      this.addProductDialog = true
    },
    saveProduct: function () {
      let product = this.products.find((e) => { if (e.id === this.productId) return e })
      this.order.products.push(product.id)
      console.log(this.order.products)
      this.product = null
      this.addProductDialog = false
    },
    cancelAddProduct: function () {
      this.addProductDialog = false
    },
    getCategorys: function () {
      this.api.getData('categories').then((res) => {
        this.categorys = res.data
        this.categorys.forEach((c) => {
          let category = c.name
          this.categoryList.push(category)
        })
        console.log(this.categoryList)
      }, (err) => {
        console.log(err)
      })
    },
    getProducts() {
      this.api.getData('product').then((res) => {
        this.products = res.data
        console.log(this.products)
      }, (err) => {
        console.log(err)
      })
    },
    getCardList: function () {
      this.api.getData('customers').then((res) => {
        res.data.forEach((customer) => {
          var cardNo = customer.card_no
          this.card_list.push(cardNo)
        })
      })
    }
  },
  mounted: function () {
    this.getCustomers()
    this.getCategorys()
    this.getCardList()
    this.getProducts()
    if (this.$route.params.id) {
      this.getById()
      this.title = '编辑订单'
    } else this.title = '创建订单'
  }
}
</script>
